<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css-wap/style.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>商品列表</title>
</head>
{include file="public/href" /}
<body>
<div class="wrap-goods">
    <div class="header">
        <img src="__STATIC__/img_user/back.png" class="back" onclick=window.location.href=sessionStorage.getItem('search_back_url');>
        <div>
            <input onkeydown="search13()" type="text" id="search" value="{:input('search','')}" placeholder="请输入搜索关键字" style="text-indent: 3%;outline: none;">
            <img src="__STATIC__/img_user/fl-sousuotubiao.png" onclick="search()">
        </div>
        <img src="__STATIC__/img_user/ss-paixu.png" class="type" onclick="sort()">
    </div>
    <div class="category">
        <ul>
            <li {eq name=":input('type',0)" value="0"}class="cur"{/eq}><div><a href="javascript:jump(0);"><span>综合</span></a></div></li>
            <li {eq name=":input('type')" value="1"}class="cur"{/eq}><div><a href="javascript:jump(1);"><span>销量</span></a></div></li>
            <li {if condition="input('type') eq 2 || input('type') eq 3" }class="cur"{/if}>
                <div>
                    <a {eq name=":input('type')" value="2"} href="javascript:jump(3);" {else/} href="javascript:jump(2);" {/eq}><span>价格</span>
                <img {eq name=":input('type',0)" value="2"}
                 src="__STATIC__/img_user/7.png"
                 {else/}
                {eq name=":input('type',0)" value='3'}
                src="__STATIC__/img_user/fl-shangtubiao.png"
                {else/}
                src="__STATIC__/img_user/fl-shangxia.png"
                {/eq}
                {/eq}>
                    </a>
                </div>
            </li>
            <li><div><a href="javascript:shai();"><span>筛选</span></a></div></li>
        </ul>
        <input type="hidden" id="type"  value="{:input('type',0)}" />
        <ul class="list_group"></ul>

        <div class="style_1" style="display:none;">
        <input type="hidden" id="brand_id" value="{:input('brand_id','')}" />
        <input type="hidden" id="cate_id"  value="{:input('cate_id','')}" />
        </div>
    </div>
</div>
</body>
{include file="public/src" /}
<script>
    var wid = $('.list_group img').width();
    $('.list_group img').height(wid);
    //页面排序
    function sort(){
        var status = $('.list_group').css('display');
        if (status == 'none'){
            $('.list_group').css('display','block');
            $('.style_1').css('display','none');
        }else{
            $('.list_group').css('display','none');
            $('.style_1').css('display','block');
        }
        if ($('.type').prop('src').indexOf('ss-paixuh') > -1){
            $('.type').prop('src','__STATIC__/img_user/ss-paixu.png');
        }else{
            $('.type').prop('src','__STATIC__/img_user/ss-paixuh.png');
        }
    }
    //layer流加载
    layui.use('flow', function() {
        var $ = layui.jquery;
        var flow = layui.flow;
        flow.load({
            elem: '.list_group' //流加载容器
            ,isAuto:true
            ,isLazyimg:true
            ,done: function(page, next){ //执行下一页的回调
                var lis = [],
                    search = $('#search').val(),
                    brand_id = $('#brand_id').val(),
                    type_id = $('#type').val(),
                    price = "{:input('price','')}",
                    cate_id = $('#cate_id').val();
                $.ajax({
                    url:"{:url('mobile/user_category/search_goods')}",
                    dataType:'json',
                    type:'post',
                    data:{'page':page,'search':search,'type':type_id,'cate_id':cate_id,'brand_id':brand_id,'price':price},
                    success:function(t){
                        layui.each(t.data, function(index, item){
                            lis.push('<li><a href="javascript:jump_goods('+item.id+');"><div class="pic"><img src="/'+item.thumb_img+'" style="max-height: 140px;" onerror=this.src="/static/mobile/img/empty_img.png" >' +
                                    '</div><h4 class="title">'+item.title+'</h4></a><div class="price">&yen;'+item.price+'<span style="text-decoration: line-through;font-size:10px;color: #696666;">&nbsp;&nbsp;&yen;'+item.market_price+'</span><span class="sale_num">销量 '+item.sale_number+'</span></div></li>'
                                    );
                        });
                        next(lis.join(''), page < t.pages);
                    },
                    error: function () {
                        layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                    }
                })
            }
        });
        var flow_list = layui.flow;
        flow_list.load({
            elem: '.style_1' //流加载容器
            ,isAuto:false
            ,isLazyimg:true
            ,done: function(page, next){ //执行下一页的回调
                var lis = [],
                        brand_id_1 = $('#brand_id').val(),
                        search_1 = $('#search').val(),
                        price_1 = "{:input('price','')}",
                        cate_id_1 = $('#cate_id').val(),
                        type_1 = $('#type').val();
                $.ajax({
                    url:"{:url('mobile/user_category/search_goods')}",
                    dataType:'json',
                    type:'post',
                    data:{'page':page,'search':search_1,'type':type_1,'brand_id':brand_id_1,'price':price_1,'cate_id':cate_id_1},
                    success:function(t){
                        layui.each(t.data, function(index, item){
                            lis.push('<div class="content" onclick="jump_goods('+item.id+')"><div class="left"><img src="/'+item.thumb_img+'" style="max-height: 140px;" onerror=this.src="/static/mobile/img/empty_img.png" ></div>' +
                                    '<div class="right"><h4>'+item.title+'</h4>' +
                                    '<div class="price" style="margin-top: 30px;">&yen;'+item.price+'<p style="float: right;color: #333;font-size: 12px;">销量'+item.sale_number+'</p></div></div></div></div>');
                        });
                        next(lis.join(''), page < t.pages);
                    },
                    error: function () {
                        layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                    }
                })
            }
        });
    });

    function shai() {
        var search = $('#search').val();
        var url = "{:url('mobile/user_category/goods_shai')}?search="+search;
        window.location.href = url;
    }

    //跳转到商品详情
    function jump_goods(id){
        var url = "{:url('mobile/user_category/goods_details')}?goods_id="+id;
        sessionStorage.setItem('goods_url_back',window.location.href);
        window.location.href = url;
    }
    function jump(type) {
        var search = $('#search').val();
        var cate_id = $('#cate_id').val();
        var brand_id = $('#brand_id').val();
        var price = "{:input('price','')}";
        window.location.href = "{:url('mobile/user_category/search_goods')}?type="+type+"&search="+search+"&brand_id="+brand_id+'&cate_id='+cate_id+"&price="+price;

    }

//    $(function () {
//        search.onkeydown = function(e){
//            console.log(1);
//            if (e.keyCode==13){
//                alert(11);
//                var type = $('#type').val(),
//                        brand_id = $('#brand_id').val(),
//                        cate_id = $('#cate_id').val(),
//                        search = $('#search').val();
//                document.activeElement.blur();
//                window.location.href = "{:url('mobile/user_category/search_goods')}?type="+type+"&search="+search+"&brand_id="+brand_id+'&cate_id='+cate_id;
//            }
//        };
//    })
    function search13() {
        var lKeyCode = (navigator.appname=="Netscape")?event.which:window.event.keyCode; //event.keyCode按的建的代码，13表示回车
        if (lKeyCode ==13){
            var type = $('#type').val(),
                    brand_id = $('#brand_id').val(),
                    cate_id = $('#cate_id').val(),
                    search = $('#search').val();
            document.activeElement.blur();
            window.location.href = "{:url('mobile/user_category/search_goods')}?type="+type+"&search="+search+"&brand_id="+brand_id+'&cate_id='+cate_id;
        }
    }
    //关键词搜索
    function search(){
        var type = $('#type').val(),
            brand_id = $('#brand_id').val(),
            cate_id = $('#cate_id').val(),
            search = $('#search').val();
        window.location.href = "{:url('mobile/user_category/search_goods')}?type="+type+"&search="+search+"&brand_id="+brand_id+'&cate_id='+cate_id;
    }


</script>

</html>